<template>
  <div>
    <!-- 海报html元素 -->
    <van-nav-bar
      title="我的二维码"
      left-text="返回"
      left-arrow
      :fixed="true"
      :placeholder="true"
      z-index="20"
      @click-left="$router.back(-1)"
    >
    <template #right v-if="showShareShow">
        <van-icon name="share-o" size="18" @click="showShare" />
      </template>
    </van-nav-bar>
    <div class="background" v-show="show"></div>
    <div id="posterHtml" class="posterHtml" v-show="show" ref="posterHtml">
      <img
        :src="posterList[id].url"
        style="display: block"
        @load="createPoster"
      />
      <!-- :style="{
        backgroundImage: 'url(' + posterHtmlBg + ')',
      }" -->
      <!-- <div>{{posterContent}}</div> -->

      <!-- 二维码 -->
      <img
        class="qrcode"
        src=""
        alt=""
        :style="posterList[id].style"
        ref="imgRef"
      />
    </div>
    <div class="posterImg" v-if="posterImg"><img :src="posterImg" /></div>
  </div>
</template>
<script>
import { ref, nextTick, reactive, toRefs } from "vue";
import QRCode from "qrcode";
import { useRoute } from "vue-router";
import { ImagePreview } from "vant";
import html2canvas from "html2canvas";
export default {
  setup() {
    const data = reactive({
      posterList: [
        {
          name: "poster1",
          url: require("@/common/img/poster1.jpg"),
          style: {
            width: "6.5rem",
            height: "6.5rem",
            top: "35.3rem",
            left: "12.3rem",
          },
        },
        {
          name: "poster2",
          url: require("@/common/img/poster2.jpg"),
          style: {
            width: "6rem",
            height: "6rem",
            top: "34rem",
            left: "12.6rem",
          },
        },
        {
          name: "poster3",
          url: require("@/common/img/poster3.jpg"),
          style: {
            width: "6.8rem",
            height: "6.8rem",
            top: "38.2rem",
            left: "11.9rem",
          },
        },
        {
          name: "poster4",
          url: require("@/common/img/poster4.jpg"),
          style: {
            width: "6.6rem",
            height: "6.6rem",
            top: "38rem",
            left: "11.6rem",
          },
        },
        {
          name: "poster5",
          url: require("@/common/img/poster5.jpg"),
          style: {
            width: "6.6rem",
            height: "6.6rem",
            top: "27.2rem",
            left: "18.7rem",
          },
        },
      ],
      showShareShow:false,
    });
    const imgRef = ref(null);
    const posterImg = ref(null);
    const show = ref(true);
    const route = useRoute();
    const { id, parents_id, user } = route.params;
    const posterHtmlBg = ref(
      // "http://www.higuang365.com/public/images/poster/poster1.jpg"
      "../../common/img/poster1.jpg"
    );
    const posterHtml = ref(null);
    const qrurl =
      "http://www.higuang365.com/index.php/wap/passport-signup.html?parents_id=" +
      parents_id;
    const opts = {
      // errorCorrectionLevel: 'H',
      // type: 'image/jpeg',
      // quality: 1,
      margin: 1,
      color: {
        dark: "#000",
        light: "#ffffff5e",
      },
    };
    const qr = () => {
      QRCode.toDataURL(
        qrurl || "http://www.higuang365.com/index.php/wap",
        opts
      ).then((url) => imgRef.value && (imgRef.value.src = url));
      // await nextTick();
      // createPoster();
      if (navigator.userAgent.indexOf("haiguang_mobile") > -1) {
        data.showShareShow = true;
      }
    };
    const imagePreview = () => {
      ImagePreview([imgRef.value.src]);
    };
    const createPoster = () => {
      // 生成海报
      const domObj = posterHtml.value;
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: false,
        logging: false,
        timeout: 1000,
        letterRendering: true,
        onclone(doc) {
          // let e = doc.querySelector("#posterHtml");
          // console.log(doc);
          // e.style.display = "block";
        },
      }).then(function (canvas) {
        // 在微信里,可长按保存或转发
        posterImg.value = canvas.toDataURL("image/png");
        show.value = false;
      });
    };
    const showShare = () => {
      let purl ="http://www.higuang365.com/public/images/d7/da/64/4b59ff412a0dd10557d482b222aa29f6e3840b4c.jpg?1477013943#h"; //可以是本地图片
      let surl ="http://www.higuang365.com/weidian/#/posterList/"+id+"/"+parents_id+"/"+user; //分享的链接
      let msg = {
        title: "我的二维码", //标题
        content: "精彩嗨逛，乐享全球！", //内容
        thumbs: [purl], //缩略图
        href: surl,
        extra: {
          scene: "WXSceneChooseByUser",
        },
      };
      window.location.href = `higuang|shareGood|${msg.title}|${msg.content}|${purl}|${surl}`;
    };

    qr();
    return {
      ...toRefs(data),
      imgRef,
      imagePreview,
      posterImg,
      posterHtmlBg,
      posterHtml,
      show,
      createPoster,
      id,
      showShare,
    };
  },
};
</script>

<style lang="scss" scoped>
.posterImg {
  width: 100vw;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.posterHtml {
  // background-image: url("../../common/img/poster1.jpg");
  // background-size: cover;
  // height: 50rem;
  width: 30rem;
  position: relative;
  margin: auto;
}
.qrcode {
  position: absolute;
}
.background {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 10;
}
</style>